<template>
    <div class='container'>
        <div class='header'>
            <el-input v-model="searchETFCode" placeholder='请输入ETF名称'></el-input>
            <el-button style="margin-left: 10px" type='primary'  icon="el-icon-search" @click="searchETF">搜索</el-button>
            <el-button style="margin-left: 10px" type="primary" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
        </div>
        <div class="table">
            <el-table
                    :data="etfList"
                    :stripe="true"
                    border
                    v-loading="tableLoading"
                    element-loading-text="图表数据加载中...."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.)"
                    style="width: 100%">
                <el-table-column
                        type="index"
                ></el-table-column>

                <el-table-column
                        prop="code"
                        label="股票代码"
                        align="center"
                >

                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        label="涨幅"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.percent >0?'success':'danger'">{{scope.row.percent}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ma5"
                        label="5日均线"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="ma10"
                        label="10日均线"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        label="价格波动"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.price_abnml_ex ===0 ">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.price_abnml_ex ===1 ">异常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="交易量波动"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.vol_abnml_ex ===0 ">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.vol_abnml_ex ===1 ">异常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="截至日期"
                    align="center"
                >
                </el-table-column>
                <el-table-column type="expand" label="k线图" width="70px">
                    <template slot-scope="props">
                        <div class='stock-graph'>
                            <ETFGraph :id='props.row.code' :code="props.row.code"></ETFGraph>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import StockGraph from '@/page/stock/component/StockGraph';
import ETFGraph from "@/page/etf/component/ETFGraph.vue";
import {getETFList} from "@/api/etf";
import {getETF, getStock} from "@/api/stock";
export default {
    name: 'Index',
    components: {ETFGraph, StockGraph },
    data(){
        return{
            etfList: [],
            pagination:{
                pageSize:10,
                pageNum:1,
                total:100
            },
            tableLoading:false,
            searchETFCode:""
        }
    },
    methods:{
        async getETFData(){
            this.tableLoading=true
            await getETFList(this.pagination).then((response)=>{
                console.log(response)
                let data= response.data.data
                this.pagination.total=data.count
                this.etfList=data.etfList
                console.log(this.etfList)
                console.log(data)
            }).catch((err)=>{
                console.log(err)
            })
            this.tableLoading=false
        },
        handleSizeChange(size){
            console.log("size",size)
            this.pagination.pageSize=size
            this.getETFData()
        },
        handleCurrentChange(page){
            console.log("page",page)
            this.pagination.pageNum=page
            this.getETFData()
        },
        async searchETF(){
            await getETF(this.searchETFCode).then((response)=>{
                this.tableLoading=true
                let data = response.data.data
                if (data.etf.length === 0){
                    this.$message({
                        type:"warning",
                        message:"未查询到"+this.searchETFCode+"的相关信息"
                    })
                }else {
                    this.etfList=data.etf
                }
                this.tableLoading=false

            }).catch(()=>{
                this.$message({
                    type:"error",
                    message:"查询失败"
                })
            })
        },
        handleReset(){
            this.pagination.pageNum=1
            this.pagination.pageSize=10
            this.getETFData()
            this.searchETFCode=""
        }

    },
    beforeMount() {
        this.getETFData()
    }
};
</script>

<style scoped lang='scss' >
.container{
  height: 95%;
  padding: 0 10px;

  .header{
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: #ffffff;
    padding: 5px 0px;

  }
  .el-input{
    width: 300px;
    margin-left: 10px;
  }
  .table{
    height: 95%;
    .stock-graph{
      width: 100%;
      height: 500px;
    }
  }
}
.pagination{
  display: flex;
  justify-content: right;
  padding-right: 20px;
  background-color: #ffffff;
  margin-top: 0px;
}

</style>